<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="GBK">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<!--    <link href="//at.alicdn.com/t/c/font_3568373_esxsj39z1cf.js">-->
    <script src="//at.alicdn.com/t/c/font_3568373_nydbx9itwrr.js"></script>
    <style>
        icon {
            width: 1em; height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        body {
            margin-top: 0;
            margin-left: 100px;
        }

        li {
            list-style: none;
        }
        /*顶部固定栏*/
        #topper{
            height: 100px;
            width: 150%;
            background-color: white;
            margin-left: -100px;
            margin-top: -20px;
            position: fixed;
            box-shadow: 0 15px 10px -15px rgb(195, 195, 195);
            z-index: 999;
        }
        #blank{
            width: 100px;
            height: 100px;
        }
        /*搜索框*/
        #topper div{
            float: left;
        }
        /*登录*/
        #login{
            font-size: 16px;
            margin-left: 350px;
            margin-top: 50px;
            height: 30px;
            line-height: 30px;
        }
        /*登录图标*/
        #user{
            width: 25px;
            height: 25px;
            /*margin-left: 160px;*/
            cursor: pointer;
        }
        /*登录span*/
        #login-span{
            display: inline-block;
            margin-top: 50px;
            margin-left: -150px;
            cursor: pointer;
        }
        /*设置*/
        #device{
            margin-left: 50px;
            margin-top: 50px;
            font-size: 16px;
            height: 30px;
            line-height: 30px;
        }
        /*设置图标*/
        #gear{
            width: 25px;
            height: 25px;
            /*margin-left: 160px;*/
            cursor: pointer;
        }
        /*设置span*/
        #device-span{
            display: inline-block;
            margin-left: 40px;
            cursor: pointer;
        }
        /*返回主页*/
        #home{
            margin-left: 50px;
            margin-top: 50px;
            font-size: 16px;
            height: 30px;
            line-height: 30px;
        }
        /*返回图标*/
        #backhome{
            width: 25px;
            height: 25px;
            /*margin-left: 160px;*/
            cursor: pointer;
        }
        /*返回span*/
        #back-span{
            display: inline-block;
            margin-left:40px;
            cursor: pointer;
        }
        #search-div {

            /*margin-left: 100px;*/
            height: 40px;
            background-color: rgb(255, 255, 255);
            width: 510px;
            border: 2px solid rgb(88, 88, 88);
            min-width: 400px;
            border-radius: 10px;
            margin-top: 30px;
        }
        #search-div:hover{
            box-shadow: 0 1px 2px 2px rgb(195, 195, 195);
            border-color: black;
        }
        #search2 {
            width: 380px;
            height: 35px;
            margin-left: 10px;
            border: none;
            outline: none;
            /* opacity: 0; */
            font-size: 14px;
        }
        .content {
            padding-top: 100px;
            width: 700px;
            height: 600px;
            /* background-color: aqua; */
            /* overflow: hidden; */
        }
        .content li {
            padding-right: 30px;
            width: 740px;
            height: 130px;
            margin-top: 20px;
            border: 1px solid rgb(184, 183, 183);
            border-radius: 5px;
            /*box-shadow: 0 1px 2px 2px rgb(195, 195, 195);*/
            margin-left: -40px;
        }
        .content li:hover{
            box-shadow: 0 1px 2px 2px rgb(195, 195, 195);
        }
        .question{
            /*background-color: antiquewhite;*/
            margin-left: 20px;
            text-decoration: underline;
            cursor: pointer;
            color: rgb(49,94,251);
        }
        .url{
            text-decoration: none;
            font-size: 12px;
            /*background-color: antiquewhite;*/
            margin-left: 20px;
            text-decoration: underline;
            cursor: pointer;
            color:#616362;
            margin-top: 30px;
        }
        .url:hover{
            font-size: 13px;
            color:#2c2c2c;
        }
        .right-nav {
            /* border: 1px solid rgb(171, 171, 171); */
            width: 200px;
            position: absolute;
            margin-left: 800px;
            margin-top: -500px;
        }
        .right-nav li:first-child{
            color: #ff253a;
        }
        .right-nav li:nth-child(n+2) {
            color: rgb(36,64,179);
            margin-left: -40px;
            font-size: 12px;
            height: 20px;
            line-height: 20px;
            margin-top: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-decoration: underline;

        }
        .right-nav li:nth-child(n+2):hover{
            font-size:14px ;
        }
        .right-nav li:first-child {
            font-size: 15px;
        }
        #search-btn {
            /*margin-left: 10px;*/
            margin-right: 10px;
            width: 70px;
            height: 80%;
            color: black;
            border: none;
            /*border-color: #0c0b0c;*/
            background-color: white;
            font-size: 16px;
            /*border-radius: 5px;*/
            white-space: nowrap;
            float: right;
            /*margin-top: -4px;*/
        }
        #shut{
            line-height: 30px;
            width: 20px;
            height: 15px;
            cursor: pointer;
            /*display: inline-block;*/
        }
        #shut:hover{
            color: red;
        }
        #right{
            width: 20px;
            height: 15px;

        }
        #guess-span{
            display: inline-block;
            /*margin-top: -100px;*/
        }
    </style>
</head>

<body>
<div>
<!--顶部栏-->
    <div id="topper">
        <div id="blank"></div>
        <div id="search-div">
            <input type="text" id="search2">
            <!--        删除图标-->
            <svg class="icon" aria-hidden="true" id="shut">
                <use xlink:href="#icon-guanbi"></use>
            </svg>
            <button id="search-btn">搜索</button>
        </div>
<!--登录-->
        <div id="login">
            <svg class="icon" aria-hidden="true" id="user">
                <use xlink:href="#icon-gerenzhongxin"></use>
            </svg>
        </div>
        <span id="login-span">登录</span>
<!--设置-->
        <div id="device">
            <svg class="icon" aria-hidden="true" id="gear">
                <use xlink:href="#icon-gengduo"></use>
            </svg>
        </div>
        <span id="device-span">设置</span>
<!--返回主页-->
        <div id="home">
            <svg class="icon" aria-hidden="true" id="backhome">
                <use xlink:href="#icon-shangyiqu"></use>
            </svg>
        </div>
        <span id="back-span">主页</span>

    </div>

<!--搜索结果区-->
    <ul class="content">
    </ul>

<!--右边栏-->
    <ul class="right-nav">
        <li>

<!--            <span id="guess-span">猜你想搜</span>-->
            <p id="guess-span">猜你想搜</p>
            <svg class="icon" aria-hidden="true" id="right">
                <use xlink:href="#icon-arrow-right"></use>
            </svg>
        </li>
        <li>
            怎么获取上一个html网页传过来的值_爬虫：一个简单实例说明爬虫机制
        </li>
    </ul>
</div>

<script>
        window.onload = function () {
            //获取右边栏内容
            var arr = ['朝鲜','心理学','游戏','水泥','糖','国家','病','吃','区别','怎么']
            var n1=Math.floor(Math.random()*10+1);//输出1～10之间的随机整数
            var n2=parseInt(10*Math.random());//输出0～10之间的随机整数
            $.ajax({
                url:`http://192.168.144.98:8080/sp/search`,
                data:arr[n2],
                type:'GET',
                success:function (data){

                    var obj = eval(data)
                    console.log(obj)
                //   生成右侧边栏
                    for(let index=0;index<10;index++){
                        var li = $('<li></li>')
                        //插入信息
                        li.html(obj[index].title)
                    //    将li插入ul
                        $(".right-nav").append(li)
                    }
                }

            })


            //点击按钮返回主页
            $('#back').click(function (){
                window.open(`http://192.168.144.98:8080`)
            })
            var data1 = null;

            //清空输入框input内容
            $('#shut').click(function (){
                $('#search2').val("")
            })
            //获取当前url
            var href = location.search
            var s = href.split('?')
            var word = s[1]
            var keyword = decodeURI(s[1])
            $('#search2').val(keyword)
            var u = `http://192.168.144.98:8080/sp/search?${word}`
            //发送请求，获取答案
            $.ajax({
                url: u,
                type: 'GET',
                async: false,
                success: function (data) {
                    data1 = data;
                    var obj = eval(data)
                    // console.log('数组长度'+obj.length)
                    for (let index = 0; index < obj.length; index++) {
                        // console.log(obj[index].title+" "+keyword)
                        //动态生成li标签
                        var li = $('<li></li>');
                        //放标题的p标签
                        var p1 = $('<p class="question"></p>')
                        //放url的p标签
                        var p2 = $('<p class="url"></p>')
                        //向p标签里面插入标题
                        $(p1).text(obj[index].title)
                        //将文件名转化为url的形式
                        var arrUrl = obj[index].fileName.split(".")
                        var Url = "http://192.168.144.98:8080/love/qq/"+arrUrl[0]+".html"
                        // console.log((Url))
                        // console.log(arrUrl[0])
                        //将url插入p标签里
                        $(p2).text(Url)
                        //将p标签插入到li里面
                        $(li).append(p1)
                        $(li).append(p2)
                        //将li插入到ul里面
                        $('.content').append(li)

                    }
                    console.log('请求成功')
                },
                error: function (url) {
                    console.log('请求失败')
                }
            })

            //点击小标题，跳转页面
            $(".question").click(function (){
                var p = $(this).next();
                console.log(p.html())
                var url = p.html()
                var arr = p.html().split('/')
                var html = arr[5].split('.')
                var txt = html[0]+".txt"
                console.log(txt)
                $.ajax({
                    url:url,
                    type:'GET',
                    data:txt,
                    success:function (data){
                        window.open('http://192.168.144.98:8080/love/qq?'+html[0])
                        console.log("success!")
                        console.log(data)
                    }
                })
            })

            //输入信息进行搜索,再次发送相同的请求
            $("#search-btn").click(function (){
                var word = $("#search2").val();
                var mess = (encodeURI(word))
                console.log(word)
                console.log(mess)
                $.ajax({
                    url: `http://192.168.144.98:8080/sp/search?${mess}`,
                    type: 'GET',
                    async: false,
                    // data:mess,
                    success: function (data) {
                        var obj = eval(data)
                        console.log('数组长度'+obj.length)
                        $('.content').children().remove();
                        for (let index = 0; index < obj.length; index++) {
                            console.log(obj[index].title+" "+keyword)
                            // var str = changeKeyRed(obj[index].title,keyword)
                            var li = $('<li></li>');
                            var p1= $('<p class="question"></p>')
                            var p2 = $('<p class="url"></p>')
                            //将文件名转化为url的形式
                            var arrUrl = obj[index].fileName.split(".")
                            var Url = "http://192.168.144.98:8080/sp/search/"+arrUrl[0]+".html"

                            $(p1).text(obj[index].title)
                            $(p2).text(Url)
                            $(li).append(p1)
                            $(li).append(p2)
                            $('.content').append(li)

                        }
                        console.log('请求成功')

                        //点击小标题，跳转页面
                        $(".question").click(function (){
                            var p = $(this).next();
                            console.log(p.html())
                            var url = p.html()
                            var arr = p.html().split('/')
                            var html = arr[5].split('.')
                            var txt = html[0]+".txt"
                            console.log(txt)
                            $.ajax({
                                url:'http://192.168.144.98:8080/love/qq?'+html[0],
                                type:'GET',
                                data:txt,
                                success:function (data){
                                    window.open('http://192.168.144.98:8080/love/qq?'+html[0])
                                    console.log("success!")
                                    console.log(data)
                                }
                            })
                        })
                    },
                    error: function (url) {
                        console.log('请求失败')
                    }
                })
            })

        }
        function changeKeyRed(str,keyWord) {
            if(str!=null&&keyWord!=null){
                console.log('111')
                var substr="/"+keyWord+"/g";
                var str1 = "<span style='color:red;font-weight:bold'>keyWord</span>"
                var replaceStr=str.replace(eval(substr),escapeStringHTML(str1))
                return replaceStr;
            }
            else {
                return str;
            }
        }
        //把实体格式字符串转义成HTML格式的字符串
        function escapeStringHTML(str) {
            str = str.replace(/&lt;/g,'<');
            str = str.replace(/&gt;/g,'>');
            return str;
        }
    </script>
</body>

</html>